<template>
  <div class="oc">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="theme.css" type="text/css">
    <nav class="navbar navbar-expand-md navbar-light" style="height:10%;background-color:rgba(0, 0, 0, 0)" >
      <div class="container"> 
        <a class="navbar-brand text-light" href="#">
          <i class="fa d-inline fa-lg fa-ship"></i>
          <b><strong>海宝百科</strong></b>
        </a> 
        <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar4">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item"> <a class="nav-link" href="http://localhost:8081/" style="color: white">海宝论坛</a> </li>
            <li class="nav-item"> <a class="nav-link" href="#board" style="color: white">意见与反馈</a> </li>
            <li class="nav-item"> 
              <el-popover
                placement="bottom-end"
                width="500px"
                trigger="click">
                  <div style="margin-bottom:10px">

            <el-input class="editSearch" v-model="userUpload.title" placeholder="主题"></el-input>
<!-- class="search-text" -->
            <!-- <el-autocomplete
                      placeholder="Ocean Wiki"
                      class="title-search"
                      v-model="input"
                      :fetch-suggestions="querySearch"
                      :trigger-on-focus="false"
                      @keyup.enter.native="findArticle"
                      clearable
                    ></el-autocomplete> -->
<!-- @keyup.enter.native='search(input)' -->
            
            <el-button type="primary" style="outline:none" round @click="clear">清空</el-button>
            <el-button type="success" style="outline:none" round @click="submitUserUpload">提交</el-button>
            <!-- <el-button type="warning" icon="el-icon-refresh" :disabled='isRefreshing' circle @click="refresh"></el-button> -->
        </div>
                  <mavon-editor
                    v-model="userUpload.content"
                    style="height:500px;"
                  />
                  <a class="nav-link" href="#" style="color: white" slot="reference">上传百科</a> 
              </el-popover>
            </li>
            <li class="nav-item"> <a class="nav-link" href="/adm/" style="color: white">后台入口</a> </li>
          </ul> 
          
          <!-- <a class="btn navbar-btn ml-md-2 btn-light" href="/login" v-show="showLogin">登录 / 注册</a> -->
          <el-button v-show="showLogin" style="float:right;" @click="toLogin">登录</el-button>

          <el-dropdown class="ava" v-show="showAva">

                <el-avatar class="profile" size="medium" :src='avaUrl' />
                <!-- <el-avatar class="profile" size="medium" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" /> -->

                <el-dropdown-menu style="width:15%" slot="dropdown">
                    <div style="margin: 10% 10%">{{username}}</div>

                    <el-divider content-position="center"></el-divider>

                    <!-- <el-dropdown-item icon="el-icon-user">个人账户</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-plus">邀请成员</el-dropdown-item> -->
                    <el-dropdown-item icon="el-icon-bangzhu">帮助中心</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-close" style="color: red" @click.native="logout">退出登录</el-dropdown-item>
                
                </el-dropdown-menu>
                
            </el-dropdown>

        </div>
      </div>
    </nav>

    <div style="width: 100%;margin:0 auto;height:90%;padding-top:14%" >

        <el-row style="">
          <el-col :span="24"  style="vertical-align:middle;height:100%;line-height:100%;margin:0 auto;text-align:center;">
            
            <transition name="el-zoom-in-center">
              <div v-show="showsearch" style="height:10%">
                <div class="title" style="color:beige;">
                  海宝百科
                </div>

                <!-- <el-dropdown 
                  placement="bottom" 
                  trigger="manual"
                  ref="autoComplete"
                  @command="handleCommand"
                > -->
                
                  <div id="sear" style="margin:0px auto;width:50%">

                    <!-- <el-input
                      placeholder="Ocean Wiki"
                      v-model="input"
                      class="search-text"
                      clearable>
                    </el-input> -->

                    <el-autocomplete
                      placeholder="Ocean Wiki"
                      class="search-text"
                      v-model="input"
                      :fetch-suggestions="querySearch"
                      :trigger-on-focus="false"
                      value-key='question'
                      @keyup.enter.native='search(input)'
                    ></el-autocomplete>

                    <el-button
                      type="success"
                      icon="el-icon-search"
                      class="search-btn"
                      @click="search(input)">
                    </el-button>

                  </div>

                  <!-- <el-dropdown-menu slot="dropdown">
                    <template v-for="(q, i) in questions">
                      
                        <el-dropdown-item :command='q' :key="i">{{q}}</el-dropdown-item>
                      
                    </template>
                    
                  </el-dropdown-menu>

                </el-dropdown> -->

                <!-- <span style="color:white;font-weight:bold;font-size:larger">
                  {{res}}
                </span> -->

              </div>
            </transition>

            

          </el-col>
        </el-row>

        
    </div>

    <div class="py-5" >
    <div class="container">
      <div class="row">
        <div class="col-lg-4 p-3 col-md-6">
          <div class="card">
            <div class="card-body p-4">
              <h2> <b>自动问答</b> </h2>
              <p>支持自然语言问句。无论是否包含疑问词，均可正确解析。<br/>输入一个问题试试？</p>
              
            </div>
          </div>
        </div>
        <div class="col-lg-4 p-3 col-md-6">
          <div class="card">
            <div class="card-body p-4">
              <h2> <b>海宝论坛</b> </h2>
              <p>在海宝论坛和其他用户交流，关注和评论，发布您的想法。如果您在百科中没有找到满意的答案，请在论坛中找找看</p>
              
            </div>
          </div>
        </div>
        <div class="col-lg-4 p-3">
          <div class="card">
            <div class="card-body p-4">
              <h2> <b>Wiki 百科</b> </h2>
              <p>百科知识词条现在可以由用户编辑了哦~<br/>如果您是某个领域的专家，海宝百科期待您的贡献，一起建设海宝知识库</p>
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
    
    <!-- <div style="height:640px;background-color:#409EFF;padding:5%">
      <div class="addArticle">
        <div style="color:white;text-align:center;padding:20px;">
          <div style="font-weight:bold;font-size:30px;padding-bottom:15px">留言板</div>
          <div style="font-weight:bold;font-size:20px">
            主题 <el-input style="width:60%;padding-left:10px;margin-bottom:10px"></el-input><br/>
            
            <el-input
            label="aaa"
            style="width:60%;padding-left:10px;margin-bottom:10px"
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea">
            </el-input>
          </div>
          
        </div>

        

      </div>
    </div> -->

    <a name="board"></a>
    <!-- background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://static.pingendo.com/cover-bubble-dark.svg);  background-position: center center, center center;  background-size: cover, cover;  background-repeat: repeat, repeat; -->
    <div class="py-5 text-center text-white" style="background-color:#407EFF" >
    <div class="container">
      <div class="row">
        <div class="mx-auto col-md-10 p-4">
          <h1 class="text-light">留言板</h1>
          <p class="mb-4 lead text-light">您的意见和建议会让我们做的更好</p>
          <form>
            <div class="form-row">
              <div class="form-group col-md-6"> <input type="text" v-model="messageBoard.username" class="form-control" id="form22" placeholder="用户名*"> </div>
              <div class="form-group col-md-6"> <input type="email" v-model="messageBoard.email" class="form-control" id="form23" placeholder="e-mail*"> </div>
            </div>
            <div class="form-group"> <input type="text" v-model="messageBoard.subject" class="form-control" id="form25" placeholder="主题*"> </div>
            <div class="form-group"> <textarea v-model="messageBoard.content" class="form-control" id="form26" rows="3" placeholder="内容"></textarea> </div> 
            <button type="button" class="btn btn-success" @click="submitMessage">发送</button>
          </form>
        </div>
      </div>
    </div>
  </div>

    <div class="py-5 text-center" >
    <div class="container">
      <div class="row">
        <div class="mx-auto col-md-7">
          <h4 class="mb-3">合作伙伴</h4>
          <div class="row text-muted">
            <div class="col-md-3 col-4 p-2 mb-2"> <i class="d-block fa fa-angellist fa-3x"></i> </div>
            <div class="col-md-3 col-4 p-2 mb-2"> <i class="d-block fa fa-cc-visa fa-3x"></i> </div>
            <div class="col-md-3 col-4 p-2 mb-2"> <i class="d-block fa fa-amazon fa-3x"></i> </div>
            <div class="col-md-3 col-4 p-2 mb-2"> <i class="d-block fa fa-paypal fa-3x"></i> </div>
            <div class="col-4 p-2 mb-2"> <i class="d-block fa fa-empire fa-3x"></i> </div>
            <div class="col-4 p-2 mb-2"> <i class="d-block fa fa-rebel fa-3x"></i> </div>
            <div class="col-4 p-2 mb-2"> <i class="d-block fa fa-first-order fa-3x"></i> </div>
          </div>
        </div>
      </div>
    </div>
  </div>

    <!-- <div class="foot">
      嗷嗷嗷
    </div> -->

  <div class="py-5"  style="background-color: rgb(240,240,240)">
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <p class="lead">订阅以获得最新消息</p>
          <form class="form-inline">
            <div class="form-group"> 
              <el-input type="email" style="width:70%;margin-right:10px" placeholder="e-mail"/>  
              <el-button type="primary" round>订阅</el-button></div>
          </form>
        </div>
        <div class="col-4 col-md-1 align-self-center"> <a href="#">
            <i class="fa fa-fw fa-facebook text-muted fa-2x"></i>
          </a> </div>
        <div class="col-4 col-md-1 align-self-center"> <a href="#">
            <i class="fa fa-fw fa-twitter text-muted fa-2x"></i>
          </a> </div>
        <div class="col-4 col-md-1 align-self-center"> <a href="#">
            <i class="fa fa-fw fa-instagram text-muted fa-2x"></i>
          </a> </div>
      </div>
      <div class="row">
        <div class="col-md-12 mt-3 text-center">
          <p>© Copyright 2021 李健成 - All rights reserved.</p>
        </div>
      </div>
    </div>
  </div>

  </div>

</template>

<script>

import request from "@/api/client.js"

function sleep(interval) {
    return new Promise(resolve => {
        setTimeout(resolve, interval);
    }) 
}

export default {
  name: "Home",
  data() {
    return {
      avaUrl: '',
      input: '',
      res: 'Result',
      showsearch: false,
      showLogin:false,
      questions: [
          
      ],
      showAva: false,
      username: '----',
      messageBoard: {
        username: '',
        email: '',
        subject: '',
        content: ''
      },

      userUpload: {
        title: '',
        content: ''
      }
      
    }
  },

  created() {
    
  },
  mounted() {
    
    this.showsearch = true;
    if(localStorage.getItem('token') == null) {
      this.showLogin = true
    } else {
      this.username = localStorage.getItem("username")
      this.avaUrl = 'https://ui-avatars.com/api/?name=' + this.username + '?s=164&d=monsterid&background=f0eaea'
      this.showAva = true;
    }
    request.listAllRelatedQuestions().then(resp => {
      // console.log(resp.data)
      this.questions = resp.data.data.questions
    })
    // this.$refs.autoComplete.show();
    this.messageBoard.username = localStorage.getItem('username')
  },

  components: {
    // HelloWorld
  },

  methods: {

    toLogin() {
      this.$router.push("/login")
    },

    logout() {
      request.logout().then(resp => {
        localStorage.clear();
        sessionStorage.clear();
        this.$store.commit('RESET_STATE')
        this.$router.go(0)
      })
    },

    querySearch(queryString, cb) {
      var results = this.questions.filter(this.createFilter(queryString));
      // var results = this.restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (question) => {
        return (question.question.indexOf(queryString.toLowerCase()) == 0);
      };
    },

    handleCommand(command) {
        this.input = command
    },

    search(question) {

      const loading = this.$loading({
        lock: true,
        text: '拼命加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      request.search(question).then(response => {
        this.showsearch = false;
        let answer = response.data.data.answer;
        sessionStorage.setItem('answer', answer);
        sessionStorage.setItem('article', response.data.data.article)
        sessionStorage.setItem('title', response.data.data.title)
        sessionStorage.setItem('related', JSON.stringify(response.data.data.related))
        loading.close();
        this.$router.push({path:'/res', name: 'Result', params: {ques: this.input}})
      })
      
      // sleep(2000);
      // this.showlogin = true;
      
    },

    clear() {
      this.userUpload.title = ''
      this.userUpload.content = ''
    },

    submitUserUpload() {
      let tempArticle = {
        title: this.username + '_' + this.userUpload.title,
        content: this.userUpload.content
      }
      request.uploadArticle(tempArticle).then(resp => {
        this.$message({
          message: '已提交',
          type: 'success',
          duration: 1500
        })
      })
    },

    submitMessage() {
      request.submitMessage(this.messageBoard).then(resp => {
        this.messageBoard.subject = ''
        this.messageBoard.content = ''
        this.$message({
          type: 'success',
          message: '已反馈',
          duration: 1000
        })
      })
    },

    // changeHash(idName) {
    //   document.querySelector(idName).scrollIntoView(true);
    // }


    // sleep(numberMillis) { 
    //   var now = new Date(); 
    //   var exitTime = now.getTime() + numberMillis; 
    //   while (true) { 
    //     now = new Date(); 
    //     if (now.getTime() > exitTime) 
    //       return; 
    //   } 
    // }
  }

};
</script>

<style >

.addArticle {
  /* position: relative;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%; */
    margin: 0 5%;
    padding: 20px 0;
    width: 90%;
    height: 80%;
    /* background-color: #67C23A; */
    /* line-height: 80px; */
}

/* 头像 */
.ava {
    float: right;
    display:block;
    height:40px;
    width: unset !important;
    margin-left: 10px;
}

.loginCard {
  width: 60%;
}

.el-dropdown {
  width: 80%;
  display: unset;
}

.footer {
  /* position:fixed; */
  /* bottom:15px; */
  left: 42%;
  /* right: 35%; */
  width: 18%;
  color: aliceblue;
}

.oc {
  height: 100%;
  background-image: url('../assets/ocean.jpg');
  background-size: 100% 100%;
}

/* .el-input {
  margin-bottom: 0px;
} */

.search-text {
  width: 65%;
}

.search-text .el-input {
  width: 100%;
}

.search-text .el-input__inner {
  /* width: 50%; */
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, .80); */
  margin-right:0px;
  box-shadow: none;
  border: none;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.title {
  line-height: 2rem;
  padding: 1%;
  text-align: center;
  font-weight: bold;
  font-size: 35px;
  /* font-family: '微软雅黑', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
  font-family: 'Geometric';
  color:beige;
}

#sear .el-button {
  /* width: 30%; */
  outline: none;
  border: none;
  padding: 12.8px 4%;
  box-shadow: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#sear .el-input {
  /* width: 85%; */
  margin-bottom:10px;
  box-shadow: none;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
  border-top-left-radius: 0px;
}

.btn {
  width: 15%;
  margin-bottom:10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.login {
  padding: 10px;
  margin: 0 auto;
  width: 50%;
  background-color: rgba(0, 0, 0, .50);
  color: white;
  border-radius: 10px;
}

.foot {
  height: 100px;
  background-color: rgb(230, 230, 230);
  /* background-color: red; */
}

</style>